;
(function () {
  let clock = document.getElementById('clock'),
    ctx = clock.getContext('2d'),
    cWidth = ctx.canvas.width,
    cHeight = ctx.canvas.height,
    hours = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2],
    t = null


  console.log(ctx);

  class Clock {
    constructor() {
      this.r = cWidth / 2
    }

    init() {
      this.draw();
      t = setInterval(this.draw.bind(this), 1000)
    }

    draw() {
      ctx.clearRect(0, 0, cWidth, cHeight)
      let {
        hours,
        minutes,
        seconds
      } = getTime()
      // console.log(hours, minutes, seconds);
      ctx.save()
      this.drawPanel();
      this.drawHourNums();
      this.drawHourIndicator(hours, minutes);
      this.drawMinuteIndicator(minutes);
      this.drawSecondIndicator(seconds);
      this.drawCentralPointer();
      ctx.restore()
    }

    drawPanel() {
      ctx.beginPath()
      ctx.translate(this.r, this.r)
      ctx.fillStyle = '#fff'
      ctx.arc(0, 0, this.r - 20, 0, 2 * Math.PI, false)
      ctx.fill()
    }

    drawHourNums() {
      ctx.beginPath()
      let radius, x, y

      ctx.fillStyle = '#000'
      ctx.font = '40px sans-serif'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      // void ctx.fillText(text, x, y, [maxWidth]);
      hours.forEach((item, index) => {
        radius = (2 * Math.PI) / 12 * index
        x = (this.r - 60) * Math.cos(radius)
        y = (this.r - 60) * Math.sin(radius)
        ctx.beginPath()
        ctx.fillText(item, x, y)
      })
      ctx.fill
    }

    drawCentralPointer() {
      ctx.beginPath()
      ctx.fillStyle = '#333'
      ctx.arc(0, 0, 13, 0, 2 * Math.PI, false)
      ctx.fill()
      ctx.beginPath()
      ctx.fillStyle = '#666'
      ctx.arc(0, 0, 6, 0, 2 * Math.PI, false)
      ctx.fill()
    }

    drawHourIndicator(hours, minutes) {
      let radius = 2 * Math.PI / 12 * hours,
        mRadius = 2 * Math.PI / 12 / 60 * minutes
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth = 5
      ctx.lineCap = 'round'
      ctx.rotate(radius + mRadius)
      ctx.moveTo(0, 0) // 坐标起点
      ctx.lineTo(0, -this.r / 1.8) // 坐标终点
      ctx.stroke()
      ctx.restore();
    }

    drawMinuteIndicator(minutes) {
      let radius = 2 * Math.PI / 60 * minutes
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth = 5
      ctx.lineCap = 'round'
      ctx.rotate(radius)
      ctx.moveTo(0, 0)
      ctx.lineTo(0, -this.r / 1.5)
      ctx.stroke()
      ctx.restore();
    }

    drawSecondIndicator(seconds) {
      let radius = 2 * Math.PI / 60 * seconds
      ctx.save()
      ctx.beginPath()
      ctx.lineWidth = 5
      ctx.strokeStyle = 'orange'
      ctx.lineCap = 'round'
      ctx.rotate(radius)
      ctx.moveTo(0, 0)
      ctx.lineTo(0, -this.r / 1.2)
      ctx.stroke()
      ctx.restore();
    }
  }

  function getTime() {
    let d = new Date()

    return {
      hours: d.getHours(),
      minutes: d.getMinutes(),
      seconds: d.getSeconds()
    }
  }

  window.Clock = Clock;
})();